<template>
   <div class="article-list">
    <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
 
        <article-item
                 :article="article"
          v-for="(article, index) in list"
          :key="index"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getArticles } from "../../../network/goods.js";
import ArticleItem from "./ArticleItem.vue"
export default {
  name: "list",
  components:{
    ArticleItem
  },
 props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false, // 加载更多 loading
      refreshLoading: false, // 下拉刷新 loading
      list: [], // 数据列表
      finished: false, // 是否结束
      timestamp: null // 请求下一页的时间戳
    };
  },
  methods: {
    onLoad() {
     getArticles({
        channel_id: this.channel.id,
        timestamp:this.timestamp || Date.now(), 
        with_top:1,
      }).then((res) => {
          console.log(res)
      

      const { results } = res.data
      this.list.push(...results)

      // 3. 将 loading 设置为 false
      this.loading = false

      // 4. 判断还有下一页数据，则更新获取下一个数据的时间戳
      //    如果没有了，则将 finished 设置为 true，不再加载更多了
      if (results.length) {
        // 更新获取下一页数据的时间戳
        this.timestamp = res.data.pre_timestamp
      } else {
        this.finished = true
      }
      
      })
    },
    onRefresh() {
     getArticles({
        channel_id: this.channel.id,
        timestamp:this.timestamp || Date.now(), 
        with_top:1,
      }).then((res) => {
          console.log(res)
      

      // 2. 把数据放到列表的顶部
      const results = res.data.results
      this.list.unshift(...results)

      // 3. 停止下拉刷新的转圈圈
      this.refreshLoading = false

      // 4. 提示用户刷新成功
      const message = results.length
        ? `更新了${results.length}条数据`
        : '暂无数据更新'
      this.$toast(message)
      
      })
    


  }
  },
};
</script>
<style lang="scss" scoped>
.article-list {
  min-height: 80vh;
}
</style>